<!DOCTYPE HTML>
<html>
<head>
	<meta name="format-detection" content="telephone = no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta charset = "utf-8"/>
	<meta name="viewport" content="user-scalable = no, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, width = device-width">

	<link rel="stylesheet" href="css/view.css">
	<link rel="stylesheet" href="css/index.css">

	<title>initialize-view</title>
</head>
<body>
	<div class = "loading">
		<label>
			正在初始化
			<span>正在加载并应用配置...</span>
		</label>
	</div>

	<section data-view-id="page1" data-view="true">
		<header>
			<span class="nav-back" data-view-rel=":back"></span>
			视图
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<div class = "body">
			<h1>视图就绪</h1>
		</div>
	</section>

	<script type = "text/javascript" src = "js/plugin/view.min.js"></script>
	<script type = "text/javascript">
		var spanObj = document.querySelector(".loading span");

		/**
		 * 加载并应用配置
		 * @param {Function} callback 操作完成后要执行的回调方法
		 */
		var loadAndApplyConfig = function(callback){
			spanObj.innerHTML = "正在加载并应用配置...";

			/* 使用定时器模拟操作过程及网络耗时 */
			setTimeout(function(){
				callback();
			}, 1000);
		};

		/**
		 * 执行token登录
		 * @param {Function} callback 操作完成后要执行的回调方法
		 */
		var loginByToken = function(callback){
			spanObj.innerHTML = "正在登录...";

			/* 使用定时器模拟操作过程及网络耗时 */
			setTimeout(function(){
				callback();
			}, 1000);
		};

		/**
		 * 加载用户数据
		 * @param {Function} callback 操作完成后要执行的回调方法
		 */
		var loadUserData = function(callback){
			spanObj.innerHTML = "正在加载用户数据...";

			/* 使用定时器模拟操作过程及网络耗时 */
			setTimeout(function(){
				callback();
			}, 1000);
		};

		/**
		 * 通过设置初始化器，应用可以根据需要灵活决定View的初始化时机，例如：
		 * 1. 读取并应用陪之后
		 * 2. token登录之后
		 */
		View.setInitializer(
			function(init){
				loadAndApplyConfig(function(){
					loginByToken(function(){
						loadUserData(init);
					});
				});
			},
			"rightnow"/* 初始化器的自动执行时机。domready：DOM就绪后执行；rightnow：立即执行。默认为：domready */
		);
	</script>
</body>
</html>